<template>
  <div style="padding-top:46px">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="加入我们" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
    </van-nav-bar>
    <div class="content">
      <div class="content_text">简单两步，即可加入蜂收部落</div>
      <div class="content_box">
        <div class="content_box_text">
          <div class="content_box_text1">
            <i class="iconfont icon-userman2"></i>
          </div>
          <div>
            <span>实名认证</span>
          </div>
        </div>
        <div>
          <i>----------</i>
        </div>
        <div class="content_box_text">
          <div class="content_box_text2">
            <i class="iconfont icon-iconxuexisel"></i>
          </div>
          <div>
            <span>线上学习</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 拍照区域 -->
    <div class="content_photo">
      <div class="content_photo_one">
        请分别上传身份证正面和背面照片
      </div>
      <div class="content_photo_two">
        <div class="content_photo_1" @click="">
          <div class="img">
            <div class="img_bg">
              <i class="iconfont icon-xiangji"></i>
            </div>
          </div>
          <div class="content_photo_1_text">点击拍摄人像框</div>
        </div>
        <div class="content_photo_2" @click="">
          <div class="img">
            <div class="img_bg">
              <i class="iconfont icon-xiangji"></i>
            </div>
          </div>
          <div class="content_photo_1_text">点击拍摄国徽框</div>
        </div>
      </div>
    </div>
    <div class="content_photo_text">请仔细核对信息，如果有误请重新拍摄</div>
    <!-- 信息区域 -->
    <div class="content_message">
      <div class="content_message_text">
        <span>真实姓名</span>
        <input type="text" placeholder="" v-model="this.userInfo.name">
        <span><i class="iconfont icon-bianji"></i></span>
      </div>
      <div class="content_message_text">
        <span>身份证号</span>
        <span style="width: 60%">{{this.userInfo.idNumber}}</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </div>
      <div class="content_message_text">
        <span>有效期限</span>
        <span style="width: 60%">{{this.userInfo.validPeriod}}</span>
        <span>&nbsp;&nbsp;</span>
      </div>
      <van-cell-group>
        <van-cell :value="value" title="工作城市" is-link @click="showCity"/>
      </van-cell-group>

    </div>
    <div class="footer">
      <button @click="alertMessage">确认提交</button>
    </div>
    <!-- 城市弹出框 -->
    <div v-if="show" class="city">
      <van-popup v-model="show" position="bottom" :overlay="false">
        <van-area :area-list="areaList" :columns-num="2" @confirm="confirm"/>
      </van-popup>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import {
    checkIsAuth,
    saveBeeUserAuth,
    selectBeeUserAuth,
    verifyBack,
    verifyCardNo,
    verifyFront
  } from 'services/identityAuth';

  export default {
    name: 'joinus',
    data() {
      return {
        show: false,
        value: '选择城市',
        userInfo: {
          userNo: '9663f2599f82468eb0dc5339c0a499a9',
          name: '程昆昆',
          idNumber: '411524199206156032',
          validPeriod: '1999-2009',
        },
        memberInfo: {},
        areaList: {
          province_list: {
            110000: '北京市',
            120000: '天津市',
            130000: '河北省',
            140000: '山西省',
            150000: '内蒙古自治区',
            210000: '辽宁省',
            220000: '吉林省',
          },
          city_list: {
            110100: '北京市',
            120100: '天津市',
            130100: '石家庄市',
            130200: '唐山市',
            130300: '秦皇岛市',
            130400: '邯郸市',
            130500: '邢台市',
            130600: '保定市',
            130700: '张家口市',
            130800: '承德市',
            130900: '沧州市',
            131000: '廊坊市',
            131100: '衡水市',
            139000: '省直辖县',
            140200: '大同市',
          },
        },
      };
    },
    // created() {
    //   this.fetchDetail();
    // },
    // computed: {
    //   ...mapGetters(['userInfo'])
    // },
    methods: {
      back() {
        this.$router.go(-1);
      },
      showCity() {
        this.show = !this.show;
      },
      // fetchDetail() {
      //   const { userNo } = this.userInfo;
      //   selectBeeUserAuth({ userNo }).then(({object}) => {
      //     this.memberInfo = object;
      //   });
      // },
      confirm(e) {
        this.show = !this.show;
        this.value = e[1].name;
      },
      alertMessage() {
        this.$dialog.confirm({
          title: '身份有误将影响认证结果，请确认',
          message: '<div style="text-align:center;margin:0 auto;font-size:20px;color:#333;"><div>小白</div><div>123456789456321236</div></div>',
          confirmButtonText: '确认无误',
          cancelButtonText: '返回修改'
        }).then(() => {
          const data = {
            userNo: this.userInfo.userNo,
            cardNo: this.userInfo.idNumber,
            realname: this.userInfo.name
          };
          verifyCardNo(data).then(({ response }) => {
            console.log(data);
            // this.$router.push('/joinconfirm');
          });
          // on confirm
        }).catch(() => {
          // on cancel
        });
      }
    }
  };
</script>
<style lang="less" scoped>
  .content {
    text-align: center;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 30px;
    .content_text {
      padding-top: 30px;
      font-size: 24px;
      color: #5c5c5c;

    }
    .content_box {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      align-items: baseline;
      .content_box_text {
        margin-right: 50px;
        margin-left: 50px;
        .content_box_text1 {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          margin-bottom: 10px;
          border: 1px solid #4993ff;
          text-align: center;
          line-height: 100px;
          .iconfont {
            font-size: 30px;
            color: #4993ff;
          }
        }
      }
      .content_box_text2 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-bottom: 10px;
        border: 1px solid #aaa;
        text-align: center;
        line-height: 100px;
        .iconfont {
          font-size: 30px;
          color: #aaa;
          border: 1px solid #aaa;
        }
      }
    }
  }

  .content_photo {
    width: 100%;
    height: 410px;
    border: 1px solid #e1e1e1;
    text-align: center;
    background: #4993ff;
    color: #fff;
    .content_photo_one {
      margin: 40px auto 40px auto;
    }
    .content_photo_two {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .content_photo_1 {
        .img {
          background: url("../../asset/images/zheng@2x.png");
          width: 100%;
          background-size: 100% auto;
        }
      }
      .content_photo_2 {
        .img {
          background: url("../../asset/images/fan@2x.png");
          width: 100%;
          background-size: 100% auto;
        }
      }
      .content_photo_1, .content_photo_2 {
        background: #ffffff;
        width: 45%;
        color: #999999;
        border-radius: 10px;
        .img {
          width: 100%;
          height: 200px;
          border-radius: 10px;
          padding-top: 70px;
          .img_bg {
            background-color: #999999;
            border-radius: 50%;
            opacity: 0.7;
            margin: auto;
            padding-top: 10px;
            width: 80px;
            height: 80px;
            .icon-xiangji {
              font-size: 40px;
              color: #fff;
            }
          }
        }
        .content_photo_1_text {
          margin: 10px auto 10px auto;
        }
      }
    }
  }

  .content_photo_text {
    height: 70px;
    line-height: 70px;
    font-size: 25px;
    color: #5c5c5c;
    padding-left: 30px;
    background: #f8f8f8;
  }

  .content_message {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 362px;
    background: #fff;
    font-size: 26px;
    .iconfont {
      font-size: 26px;
    }
    .content_message_text {
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 90px;
      input {
        width: 60%;
        border: none;
        outline: none;
      }
      .change {
        display: flex;
        justify-content: space-between;
      }
    }
    [class*=van-hairline]::after {
      border: none;
    }
  }

  .footer {
    text-align: center;
    margin: 0 auto;
    padding-top: 30px;
    button {
      width: 300px;
      height: 74px;
      border-radius: 50px;
      background: #fbcb81;
      color: #fff;
      font-size: 32px;
      border: 1px solid #f7a427;
    }
  }

</style>
